<template>
  <div class="box" style="display: none;">
    <div class="container product-detail">
      <div class="product-box">
        <div class="picture">
          <el-carousel :autoplay="false" arrow="always" height="450px" indicator-position="outside">
            <el-carousel-item v-for="(item, index) in resources_many" :key="index">
              <template v-if="item.type === 'img'">
                <el-image class="image" fit="scale-down" :src="item.img" :preview-src-list="resources_many_img"></el-image>
              </template>
              <template v-else>
                <VueVideo :sources="item.img" :poster="poster" />
              </template>
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="parameter">
          <div class="title">{{goodDetail.name}}</div>
          <template v-if="goodDetail.is_show === 0">
            <div class="sell-out">{{$t('product.sold_out')}}~</div>
          </template>
          <template v-if="!inventoryFlag">
            <div class="sell-out">{{$t('product.sell_out')}}~</div>
          </template>
          <template v-else>
            <div v-if="goodDetail.short_description" class="description">{{goodDetail.short_description}}</div>

            <el-divider></el-divider>
            <div class="sku">
              <sku ref="sku" :getList="goodDetail" @purchasePattern="purchasePattern" v-if="goodDetail.id"></sku>
            </div>
            <div class="purchase_number" v-if="goodDetail.purchase_number">{{$t('product.time_limit')}}{{ goodDetail.purchase_number }}{{$t('good_indent.piece')}}</div>
            <el-divider></el-divider>
            <div class="shipping-address">

            </div>
            <!-- bug 编译不了 -->
            <div class="operation">
              <el-button type="danger" plain @click="buy(true)" :disabled="goodDetail.state === 0"><b>{{$t('product.buy')}}</b></el-button>
              <!-- <template>
                <template v-if="goodDetail.type !== $t('product.type.keys') && goodDetail.type !== $t('product.type.download')">
                </template>
              </template> -->
              <template>
                <el-button type="info" @click="card"><b>카트 추가</b></el-button>
              </template>
              <template>
                <el-button type="info" :class="{'product-detail-on' : collect}" icon="el-icon-star-off" @click="toCollect"><b>{{$t('product.collect')}}</b></el-button>
              </template>
            </div>
          </template>
        </div>
      </div>
    </div>
    <el-divider></el-divider>
    <!-- 详情-->
    <div class="product-box">
      <div class="tab">
        <span :class="{on:tab === 1}" @click="cutTab(1)">{{$t('product.details')}}</span>
      </div>
      <div class="detail-box">
        <div class="container" v-loading="tabLoading">
          <div v-if="tab === 1" v-html="goodDetail.details"></div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import { detail } from '@/api/good'
import { create as collectCreate, destroy as collectDestroy, detail as getCollectDetail } from '@/api/collect'
import sku from '@/components/Sku'
import VueVideo from '@/components/VueVideo'
import 'video.js/dist/video-js.css'
export default {
  components: {
    sku,
    VueVideo
  },
  data() {
    return {
      tab: 1,
      inventoryFlag: true, //true有货; false 无货
      tabLoading: false,
      goodDetail: {},
      specificationDefaultDisplay: {},
      resources_many: [],
      resources_many_img: [],
      collect: 0,
      poster: ''
    }
  },
  async asyncData(ctx) {
    // try {
    //   const { params } = ctx;
    //   let inventoryFlag = false
    //   let [goodDetailData] = await Promise.all([
    //     detail(params.id),
    //   ]);
    //   if (goodDetailData.inventory_show > 0) {
    //     inventoryFlag = true
    //   }
    //   let resources_many = [];
    //   let resources_many_img = [];
    //   let poster;
    //   if (goodDetailData.resources_many.length > 0) {
    //     goodDetailData.resources_many.forEach((item, index) => {
    //       if (item.depict.indexOf('_video') !== -1) {
    //         item.type = 'video';
    //         resources_many.unshift(item)
    //       } else if (item.depict.indexOf('_poster') !== -1) {
    //         poster = item.img
    //       } else {
    //         item.type = 'img';
    //         resources_many.push(item);
    //         resources_many_img.push(item.img)
    //       }
    //     })
    //   }
    //   return {
    //     inventoryFlag: inventoryFlag,
    //     goodDetail: goodDetailData,
    //     resources_many: resources_many,
    //     resources_many_img: resources_many_img,
    //     poster: poster,
    //   }
    // } catch (err) {
    //   ctx.$errorHandler(err)
    // }
  },
  head() {

  },
  mounted() {
    // if ($nuxt.$store.state.hasLogin) {
    //   this.getCollect()
    // }
  },
  methods: {
    async initInfo(id) {
      console.log("🚀 ~  id11111: ", id)
      // const { params } = ctx;
      let inventoryFlag = false
      let [goodDetailData] = await Promise.all([
        detail(id),
      ]);
      if (goodDetailData.inventory_show > 0) {
        inventoryFlag = true
      }
      console.log("🚀 ~  id1111122: ", id)

      let resources_many = [];
      let resources_many_img = [];
      let poster;
      if (goodDetailData.resources_many.length > 0) {
        goodDetailData.resources_many.forEach((item, index) => {
          if (item.depict.indexOf('_video') !== -1) {
            item.type = 'video';
            resources_many.unshift(item)
          } else if (item.depict.indexOf('_poster') !== -1) {
            poster = item.img
          } else {
            item.type = 'img';
            resources_many.push(item);
            resources_many_img.push(item.img)
          }
        })
      }
      console.log("🚀 ~  id1111122: ", id)
      this.inventoryFlag = inventoryFlag
      this.goodDetail = goodDetailData
      this.resources_many = resources_many
      this.resources_many_img = resources_many_img
      this.poster = poster

      // return {
      //   inventoryFlag: inventoryFlag,
      //   goodDetail: goodDetailData,
      //   resources_many: resources_many,
      //   resources_many_img: resources_many_img,
      //   poster: poster,
      // }
      this.$nextTick(() => {
        console.log("🚀 ~  this.poster: ", this.poster)

        this.$refs.sku.cart(false)
      })

    },
    //选择后返回的数据
    purchasePattern(data) {
      this.specificationDefaultDisplay = data;
    },
    buy(state) {
      if (!$nuxt.$store.state.hasLogin) {
        $nuxt.$store.commit('loginCheck');
        return false
      }
      this.$refs.sku.cart(state)
    },
    card() {
      this.$refs.sku.cart(false)
    },
    getCollect() {
      getCollectDetail($nuxt.$route.params.id).then(response => {
        this.collect = response
      })
    },
    // 收藏
    toCollect() {
      if (!$nuxt.$store.state.hasLogin) {
        $nuxt.$store.commit('loginCheck');
        return false
      }
      if (this.collect) {
        collectDestroy(this.goodDetail.id)
      } else {
        collectCreate(this.goodDetail)
      }
      this.collect = !this.collect
    },
    // 切换栏目
    cutTab(index) {
      this.tabLoading = true;
      this.tab = index;
      setTimeout(() => {
        this.tabLoading = false
      }, 1000)
    }
  }
}

</script>


<style lang='scss' scoped>
.product-detail-on .el-icon-star-off {
  color: #fa524c;
}
.box {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #dcdfe6;
  background-color: #ffffff;
}
.product-box {
  .tab {
    text-align: center;
    padding: 10px 0 20px 0;
    span {
      padding: 0 20px 0 20px;
      color: #757575;
      cursor: pointer;
    }
    .on {
      color: #fa524c;
      font-size: 15px;
      font-weight: bold;
    }
  }
  .detail-box {
    background-color: #f4f4f4;
    .container {
      text-align: center;
      overflow: hidden;
      img {
        display: block;
        margin: 0 auto;
      }
    }
  }
}
.product-detail {
  .breadcrumb {
    padding: 20px 0 20px 0;
  }
  .product-box {
    display: flex;
    .picture {
      width: 460px;
      margin-right: 20px;
      .image {
        width: 100%;
      }
    }
    .parameter {
      flex: 1;
      .title {
        font-size: 24px;
        font-weight: 400;
        color: #212121;
      }
      .description {
        color: #b0b0b0;
        margin: 0;
        padding-top: 8px;
        line-height: 1.5;
      }
      .price-box {
        display: flex;
        padding-top: 8px;
        .price {
          font-size: 28px;
          color: #fa524c;
          .symbol {
            font-size: 14px;
          }
        }
        .m-price {
          position: relative;
          top: 3px;
          font-size: 14px;
          margin-left: 5px;
          color: #b0b0b0;
          text-decoration: line-through;
        }
      }
      .operation {
        display: flex;
      }
      .purchase_number {
        font-size: 12px;
        color: #fa524c;
        margin-left: 90px;
        padding-top: 10px;
      }
      .sell-out {
        color: #999999;
        line-height: 50px;
      }
    }
  }
}
</style>

